<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <el-card shadow="never">
        <el-form :inline="true" label-width="80px">
          <div class="box">
            <div class="label">
              <el-form-item prop="title" label="学科名称">
                <el-input
                  placeholder=""
                  class="filter-item"
                  style="width: 200px"
                  v-model="params.subjectName"
                ></el-input>
              </el-form-item>
              <el-button class="filter-item" size="small" @click="resetForm"
                >清除</el-button
              >
              <el-button size="small" type="primary" @click="filterSub">搜索</el-button>
            </div>
            <div class="add">
              <el-button @click="openSub" type="success" icon="el-icon-edit">
                添加学科</el-button
              >
            </div>
          </div>
        </el-form>
        <!-- 灰色数据统计 中部内容 -->
        <el-alert :title="alertText" type="info" show-icon :closable="false">
        </el-alert>
        <br />
        <!-- 表格数据 -->
        <div class="table">
          <el-table :data="subjectList" style="lable-width: 100%">
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="subjectName" label="学校名称">
            </el-table-column>
            <el-table-column prop="username" label="创建者"> </el-table-column>
            <el-table-column prop="addDate" label="创建日期" width="180">
              <template #default="{ row }">
                {{ formatDate(row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="isFrontDisplay" label="前台是否显示">
              <template #default="{ row }">
                {{ formatisFrontDisplay(row.isFrontDisplay) }}
              </template>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录">
            </el-table-column>
            <el-table-column prop="tags" label="标签"> </el-table-column>
            <el-table-column prop="totals" label="标题数量"> </el-table-column>
            <el-table-column prop="address" label="操作" width="240">
              <template #default="{row}">
                <el-button type="text" size="min"  @click="godirectorys(row.id, row.subjectName)">学科分类</el-button>
                <el-button type="text" size="min"  @click="gotags(row.id, row.subjectName)">学科标签</el-button>
                <el-button type="text" size="min"
                ref="editForm"
                 @click="editSub(row.id)"
                  >修改</el-button
                >
                <el-button type="text" size="min" @click="delSub(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部页码 -->
        <div class="block" style="text-align: right">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 修改和添加以其使用的弹框 -->
    <el-dialog :title="title" :visible.sync="isShow">
      <el-form :model="form" :rules="rules" ref="addForm">
        <el-form-item label="学科名称" prop="subjectName" label-width="80px">
          <el-input
            placeholder="请输入学科名称"
            v-model="form.subjectName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="isFrontDisplay">
          <el-switch
            style="display: block"
            v-model="form.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inactive-text="是否显示"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeSub">取消</el-button>
        <el-button type="primary" @click="addSub">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list as reqGetSubjectList, add, update, detail, remove } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      // 弹框开关
      circui: false,
      // 弹框输入的规则
      rules: {
        subjectName: [
          { required: true, message: '请输入内容', tigger: ['blur'] }
        ]
      },
      isShow: false,
      // 显示弹框
      alertText: '',
      form: {
        isFrontDisplay: '',
        subjectName: ''
      },
      params: {
        page: 1,
        pagesize: 10,
        title: this.title,
        subjectName: ''
      },
      subjectsa: '',
      // 通过接口调取list
      subjectList: [],
      // 底部页码总数
      total: 0,
      // 学科title
      title: ''
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 每页最多能展示的数据数量
    sizeChange (page) {
      this.params.page = page
      // 获取数据
      this.getSubjectList()
    },
    // 页码获取数据
    currentChange (page) {
      this.params.pagesize = page
      console.log(page)
      // 获取数据
      this.getSubjectList({ page })
    },
    // 1.清空输入框
    resetForm () {
      // 1.清空输入框
      this.params.subjectName = ''
      // 2.获取列表
      // list()
    },
    // 获取学科列表
    async getSubjectList (value) {
      const { data } = await reqGetSubjectList(value)
      console.log(data)
      this.subjectList = data.items
      this.total = data.counts
      this.alertText = `这里一共${this.total}条数据`
    },
    // 格式化时间
    formatDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    formatisFrontDisplay (value) {
      const NUM = {
        1: '是',
        0: '不是'
      }
      return NUM[value]
    },
    // 添加学科
    async openSub () {
      this.isShow = true
      // await reqAddSubjects(val)
      // this.getSubjectList()
      this.title = '创建学科'
    },
    // 关闭弹框
    closeSub () {
      // 数据全部清除
      this.$refs.addForm.resetFields()
      this.form = {
        isFrontDisplay: 1,
        subjectName: ''
      }
      this.isShow = false
    },
    // 确认添加
    addSub () {
      this.$refs.addForm.validate(async (flag) => {
        if (flag) {
          if (this.form.creatorID) {
            const res = await update(this.form)
            console.log(res)
            this.$message.success('修改成功')
            this.closeSub()
            this.getSubjectList()
          } else {
            const res = await add(this.form)
            console.log(res)
            this.$message.success('添加学科成功')
            this.closeSub()
            this.getSubjectList()
          }
        }
      })
    },
    // 修改学科
    async  editSub (id) {
      // title变成修改学科
      this.title = '修改学科'
      this.isShow = true
      const res = await detail({ id: id })
      console.log(res)
      this.form = res.data
      this.isFrontDisplay = res.isFrontDisplay
    },
    // 删除学科
    delSub (id) {
      this.$confirm('尊的要删除吗', '温馨提示').then(async () => {
        const res = await remove({ id: id })
        console.log(res)
        this.$message.success('删除学科成功')
        this.getSubjectList()
      })
    },
    // 跳路由啊啊啊
    godirectorys (id, subjectName) {
      // 路由跳转传递参数 path + query
      // name + params
      this.$router.push({
        path: 'directorys',
        query: {
          id,
          subjectName
        }
      })
    },
    gotags (id, subjectName) {
      // 路由跳转传递参数 path + query
      // name + params
      this.$router.push({
        path: 'tags',
        query: {
          id,
          subjectName
        }
      })
    },
    // 搜索
    filterSub () {
      this.params.page = 1
      this.getSubjectList(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .box {
    display: flex;
    justify-content: space-between;
  }
}
</style>
